<template>
    <div id="setQrCode">
         <!-- <div class="title">{{pageTitle}}</div> -->
         <div class="templateList">
                <div class="main" v-for="(item,index) in tempList" :key="index">
                    <qrcodeTemplate :index="index" :logoIMG="qrCodeParams.logo_url" type="index" :radioVal="qrCodeParams.qr_type" :status="qrCodeParams.is_show" @change="templateChange" />
                </div>
         </div>
         <div class="uploadMain">
            <!-- <div class="title">上传二维码logo</div> -->
            <div class="qrCodeUpload">
                <div class="logoIMG">logo图片<i>*</i></div>
                <div class="logoIMGMain">
                    <div class="logoIMGUpload">
                        <i v-if="qrCodeParams.logo_url" class="imgMain">
                            <img :src="qrCodeParams.logo_url" alt="">
                            <div class="tier">
                                <img :src="require('@/assets/images/del.png')" alt="" @click="delLogoIMG">
                            </div>
                        </i>
                        <i v-else>logo</i>
                        <i @click="upcouPic" class="uploadBtn">
                            <img :src="require('@/assets/images/add.png')" alt="">
                        </i>
                    </div>
                    <div class="text">只能上传jpg/png文件，且不超过500kb，尺寸为200x200px</div>
                </div>
            </div>
            <div class="showSwitch">
                <div class="title">是否显示<i>*</i></div>
                <el-switch
                v-model="qrCodeParams.is_show"
                @change="switchChange"
                inactive-text="显示状态">
                </el-switch>
            </div>
            <div class="qrCodeUpload" style="margin-top:25px;">
                <div class="logoIMG">打印效果:</div>
                  <el-image 
                        style="width: 106px; height: 106px; border-radius:4px"
                        :src="require('@/assets/images/yangban.png')" 
                        :preview-src-list="[require('@/assets/images/yangban.png')]">
                  </el-image>
            </div>
         </div>
    </div>
</template>

<script>
    import qrcodeTemplate from '@/components/qrCodeMain/qrCodeTemplate'
    import fileUtil from '@/libs/fileUtil.js'
    import {getRam,} from "@/api" 
    import { getQrcodeType,setQrcodePrint } from "./api"
    import OSS from 'ali-oss'
    export default {
        components:{qrcodeTemplate},
        props:{
            title:String
        },
        created(){
          this.tempList = this.$store.state.qrCodeTpData
          this.getQrCodeParams()
        },
        watch:{
            '$store.state.warehouseOfAssetsManager'(newData,old){
                this.getQrCodeParams()
            }
        },
        computed:{
            pageTitle(){
                return this.title
            }
        },
        data(){
            return{
                tempList:[],
                qrCodeParams:{}
            }
        },
        methods:{
            // 二维码模版切换
            templateChange(val){
               this.qrCodeParams.qr_type = val
               this.setQrCodeParams()
            },
            // 开关切换
            switchChange(){
               this.setQrCodeParams()
            },
            //图片上传
            upcouPic(val){
                    fileUtil.getFile({
                        multiple:true,
                        aaccept:"image/jpg,image/png", //文件类型， 非必填，默认值image/*
                        done:(files,src,dom)=>{
                            var file = Array.prototype.slice.call(files) 
                            let _this =this;
                            getRam().then(res=>{
                                var client = new OSS({
                                    region: res.region,
                                    accessKeyId: res.accessKeyId,
                                    accessKeySecret: res.accessKeySecret,
                                    bucket:  res.bucket
                                });
                                if(file[0].type.indexOf('image')>-1){
                                        let promise = client.multipartUpload((new Date().getTime())+file[0].name, file[0]).then(function(respond){
                                        _this.qrCodeParams.logo_url = res.url+respond.name
                                        _this.setQrCodeParams()
                                        }).catch((err) => {
                                            console.log(err)
                                        })
                                    }else{
                                        _this.$message({
                                            showClose: true,
                                            message: '文件格式不对',
                                            type: 'error'
                                        });
                                }
                            })
                        }
                    })
            },
            //删除LOGO
            delLogoIMG(){
               this.qrCodeParams.logo_url = ''
               this.setQrCodeParams()
            },
            // 获取二维码模版默认参数
            getQrCodeParams(){
                getQrcodeType({wh_id:this.$store.state.warehouseOfAssetsManager})
                .then((res)=>{
                    if(res != null){
                       this.qrCodeParams = {
                           ...res,
                           qr_type:res.qr_type.toString(),
                           is_show:res.is_show == 1
                       }
                    }
                })
            },
            setQrCodeParams(){
               let params = {
                   ...this.qrCodeParams,
                   is_show:this.qrCodeParams.is_show?1:0,
                   wh_id:this.$store.state.warehouseOfAssetsManager
               }
                setQrcodePrint(params)
                .then(res=>{
                    // this.getQrCodeParams()
                })
            }
        }
    }
</script>

<style lang="scss">
.el-icon-circle-close{
    font-size:40px !important;
    color: #000
}
.el-image-viewer__close {
    top: 70px !important;
    right: 70px !important;
}
#setQrCode{
   width:100%;
   i{
       font-style: normal;
   }
   > .title{
       width:100%;
       height:27px;
       line-height:27px;
       font-weight:600;
       font-size:18px;
       color:#101010;
       padding:0 0 12px 13px;
       border-bottom:1px solid rgba(223, 223, 223, 1);
   }
   .el-row{
      margin:0 !important
   }
   .templateList{
    //    margin-top:27px !important;
       display: flex;
        > .main{
            width: calc(367px - 48px) !important;
            height:calc(248px - 65px);
            background: #F7F7F7;
            margin-right:15px;
            padding:25px 24px 40px;
        }    
   }
   .uploadMain{
       margin: 30px 0 0 11px;
       > .title{
            height: 24px;
            line-height: 24px;
            color: rgba(16, 16, 16, 1);
            font-size: 16px;
            margin-bottom: 24px;
       }
       .qrCodeUpload{
           display: flex;
           .logoIMG{
               color: rgba(16, 16, 16, 1);
               font-size: 14px;
               position: relative;
               padding-right: 7px;
               font-family: SourceHanSansSC-regular;
               i{
                   color: red;
                   position: absolute;
                   right: 0;
                   top: 0;
               }
           }
           .logoIMGMain{
               flex:1;
               margin-left: 10px;
               .logoIMGUpload{
                   display: flex;
                   height: 70px;
                   margin-bottom: 15px;
                   i{
                       width: 70px;
                       height: 70px;
                       line-height: 70px;
                       text-align: center;
                       background-color: #fafafa;
                       color: #101010;
                       font-size: 14px;
                       border-radius: 4px 4px 4px 4px;
                       border: 1px solid rgba(0, 0, 0, 0.15);
                   }
                   .imgMain{
                       position: relative;
                      &:hover .tier{
                          display: flex;
                          justify-content: center;
                          align-items: center;
                      }
                      .tier{
                          cursor: pointer;
                          position: absolute;
                          left: 0;
                          top: 0;
                          width: 100%;
                          height: 100%;
                          background-color: rgba(51,51,51,.8);
                          display: none;
                          justify-content: center;
                          align-items: center;
                          img{
                              width: 24px;
                              height: 24px;
                              display: block
                          }
                      }
                   }
                   .uploadBtn{
                       display: flex;
                       flex-direction: column;
                       justify-content: center;
                       align-items: center;
                       margin-left: 15px;
                       cursor: pointer;
                       img{
                           width: 30px;
                           height: 30px;
                           display: block;
                       }
                       p{
                           height: 20px;
                           line-height: 20px;
                           color: rgba(0, 0, 0, 0.65);
                           font-size: 14px;
                           margin-top: 5px;
                       }
                   }
                   img{
                       width: 70px;
                       height: 70px;
                       display: block;
                       border-radius: 4px 4px 4px 4px;
                   }
               }
               .text{
                   color: rgba(16, 16, 16, .8);
                   font-size: 12px;
               }
           }
       }
       .showSwitch{
           margin-top: 30px;
           display: flex;
           align-items: center;
           .title{
               color: rgba(16, 16, 16, 1);
               font-size: 14px;
               position: relative;
               padding-right: 7px;
               font-family: SourceHanSansSC-regular;
               i{
                   color: red;
                   position: absolute;
                   right: 0;
                   top: 0;
               }
           }
           .el-switch__label.is-active{
              color: rgba(16, 16, 16, 1) !important
           }
           .el-switch__label{
               color: #13C75B!important;
               margin-left: 10px;
           }
           .el-switch.is-checked .el-switch__core{
               border-color: #13C75B !important;
               background-color: #13C75B !important;
           }
       }
   }
}
</style>